<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/style.css">
  <style>
    .big_box {
      width: 465px;
      height: 256px;
      /*background-color: pink;*/
      line-height: 40px;
    }
    .first_box {
      height: 40px;
      color: #ffffff;
      background-color: #195eb4;
      font-weight: bold;
    }
    .word_box {
      width: 33.3%;
      text-align: left;
      padding-left: 16px;
    }
    .cpu_percentage {
      width: 33%;
      text-align: center;
    }
    .neicun_percentage {
      width: 33%;
      text-align: center;
    }
    .small_box {
      height: 36px;
      line-height: 36px;
    }
    .small_box .cpu_percentage,
    .small_box .neicun_percentage{
      font-size: 18px;
    }
    .big_box .small_box:nth-child(2n-1) {
      color: #d9d63a;
    }
    .big_box .small_box:nth-child(2n) {
      color: #d5d7dc;
      background-color: rgba(7,45,91,0.18);
    }
  </style>
</head>
<body style="overflow: hidden">
  <div class="big_box">
    <div class="first_box fix">
      <div class="word_box l">伏锂码云</div>
      <div class="cpu_percentage l">CPU占用率</div>
      <div class="neicun_percentage l">内存占用率</div>
    </div>
<!--    <div class="small_box">-->
<!--      <div class="word_box jinchuanyun l">金川云</div>-->
<!--      <div class="cpu_percentage baifenbi1 l">16%</div>-->
<!--      <div class="neicun_percentage baifenbi2 l">26%</div>-->
<!--    </div>-->

  </div>
</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
  $(function() {
    getJson("shp_jcy.json", {}, function(res) {
      let arr = res.data.splice(0, 6)
      for (let i = 0; i < arr.length; i++) {
        $('.big_box').append(`<div class="small_box">
                              <div class="word_box l">${arr[i].typeName}</div>
                              <div class="cpu_percentage l bf1${i}"></div>
                              <div class="neicun_percentage bf2${i} l"></div>
                            </div>`)
        timeNow('bf1'+i,'bf2'+i);
      }
    })

  })

  function timeNow(dom1,dom2) {
    window.setInterval(function (){
      let a = Math.ceil(Math.random() * 20+30) + '%';
      $('.'+dom1).html(a)
      let b = Math.ceil(Math.random() * 20+30) + '%';
      $('.'+dom2).html(b)
    }, 2500);//使用字符串执行方法
  }

</script>
</html>
